<template>
  <body id="canvas"></body>
</template>

<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { DirectionalLightShadow } from 'three'

export default {
  name: 'Example',
}

declare global {
  interface Window {
    MyNamespace: any
  }
}

window.MyNamespace = window.MyNamespace || {}

let camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
let scene: THREE.Scene = new THREE.Scene()
let renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({ antialias: true })
let controls: OrbitControls | null = null
let light: THREE.Light = new THREE.DirectionalLight(0xffffff, 1)
let f22: THREE.Object3D
init()
animate()

function init() {
  light.position.set(100, 100, 100)
  scene.add(light)

  const geometry = new THREE.BoxGeometry(30, 30, 30)
  const material = new THREE.MeshLambertMaterial({ color: 0xff00ff })
  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(0, 15, 0)
  scene.add(mesh)

  let planeGeo = new THREE.PlaneGeometry(1000, 1000)
  let planeMat = new THREE.MeshLambertMaterial({ color: 0xffffff })
  let plane = new THREE.Mesh(planeGeo, planeMat)
  plane.receiveShadow = true
  plane.position.y = -0.01
  plane.rotation.x = -0.5 * Math.PI
  scene.add(plane)

  const manager = new THREE.LoadingManager(
    () => {
      console.log('正在加载')
    },
    (url, num, total) => {
      console.log(`${url},已加载${num / total}`)
    },
    (url) => {
      console.log(`${url}加载失败`)
    }
  )

  const mtlLoader = new MTLLoader(manager).setPath('../../static/').load('F-22_raptor1.mtl', (material) => {
    material.preload()
    new OBJLoader()
      .setMaterials(material)
      .setPath('../../static/')
      .load('F-22 raptor1.obj', (obj) => {
        obj.scale.set(10, 10, 10)
        obj.position.set(0, 100, 0)
        f22 = obj
        scene.add(obj)
      })
  })

  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.listenToKeyEvents(window as any) // optional
  //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

  controls.enableDamping = true // an animation loop is required when either damping or auto-rotation are enabled
  controls.dampingFactor = 0.05

  controls.screenSpacePanning = false

  controls.minDistance = 100
  controls.maxDistance = 500

  controls.maxPolarAngle = Math.PI


  window.addEventListener('resize', onWindowResize)
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight

  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
}

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
  if (f22) {
    f22.rotation.y += 0.001
  }
}
</script>

<style scoped></style>
